<template>
  <div class="container">
    <!-- 图片展示 -->
    <img :src="bannerImage" class="banner-image" alt="Order Success" />

    <!-- 倒计时信息 -->
    <div class="countdown-text">
      下单成功，还有 <span id="ss">{{ countdown }}</span> 秒跳转到主页面
    </div>

    <!-- 提前跳转按钮 -->
    <router-link to="/main" class="redirect-btn">立即跳转</router-link>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';

// 图片路径（统一写法）
const bannerImage = new URL('@/assets/images/banner_south.PNG', import.meta.url).href;

const countdown = ref(5);
const router = useRouter();
let timer = null;

const startCountdown = () => {
  timer = setTimeout(() => {
    countdown.value--;
    if (countdown.value === 0) {
      router.push('/main');
    } else {
      startCountdown();
    }
  }, 1000);
};

onMounted(() => {
  startCountdown();
});

onBeforeUnmount(() => {
  clearTimeout(timer);
});
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: linear-gradient(to bottom, #fdfcfb, #e2d1c3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Arial", sans-serif;
  color: #333;
}

.container {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 40px 30px;
  width: 400px;
  max-width: 90%;
  animation: fadeIn 1s ease-in-out;
}

.banner-image {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.countdown-text {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}

#ss {
  display: inline-block;
  font-size: 36px;
  color: #e67e22;
  font-weight: bold;
  margin-top: 10px;
}

.redirect-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background: #fccc1c;
  color: #734012;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.redirect-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  background: #e0b816;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

  